<template>
    <div>Vue3生命周期 见控制台打印信息</div>
    <div>{{ execStep }}</div>
</template>


<script>
export default {

    data() {
        let execStep = ''
        return { execStep }
    },
    beforeDestroy() {
        // 在组件销毁之前执行
        console.log('beforeDestroy');
    },

    beforeCreate() {
        // 在组件实例化之前执行，此时数据观测、事件配置和消息订阅都尚未配置
        console.log('beforeCreate');
    },

    created() {
        this.execStep += 'created'
        // 打印创建信息
        console.log('created');
    },

    beforeMount() {
        this.execStep += 'beforeMount';
        // 在组件挂载之前执行的代码
        console.log('beforeMount');
    },
    onMounted() {
        this.execStep += 'onMounted';
        // 输出日志信息，表明组件已经挂载
        console.log('onMounted');
    },
    beforeUpdate() {
        // 在组件更新前执行
        this.execStep += 'beforeUpdate';
        console.log('beforeUpdate');
    },
    updated() {
        this.execStep += 'updated';
        // 输出日志信息，表示组件已更新
        console.log('updated');
    },
    beforeUnmount() {
        this.execStep += 'beforeUnmount';
        // 在组件卸载之前执行的代码
        console.log('beforeUnmount');
    },

    unmounted() {
        this.execStep += 'unmounted';
        // 当组件卸载时，打印'unmounted'
        console.log('unmounted');
    },
}
</script>